import {apiGetNavList} from '@/services/home';
import {useRequest, useSize} from 'ahooks';
import {sortBy} from 'lodash';
import {observer} from 'mobx-react';
import {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
import styles from './default.less';
import {Button, Divider, Spin, Modal} from 'antd';
import ReactDOM from 'react-dom';

const dom = document.createElement('div');

const Layout = observer(() => {
    const [current, setCurrent] = useState(0);
    const [tag, setTag] = useState(false);
    const [modalUrl, setmodalUrl] = useState('');
    const [data, setData] = useState([]);
    const [loading, setloading] = useState(true)
    const [close, setclose] = useState(false)

    const {} = useRequest(() => {
        return apiGetNavList().then((res: any) => {
            if (res.code == 200) {
                setCurrent(res?.data?.[0]?.navId);
                setData(sortBy(res.data, 'sortOrder'));
                setloading(false)
            }
        });
    });

    const size = useSize(document.body);

    const zoomObj = () => {
        const widthPer = (size?.width || 1920) / 1920;
        return {zoomx: widthPer};
    };

    const resourceVOList = useMemo(() => {
        const list = data?.filter(o => o.title !== '联系我们').find((o) => o.navId == current)?.resourceVOList;
        return list
    }, [data, current]);

    const JSXdom = (
        <div
            className={styles.headerContainer}
            style={{
                width: 1920,
                transform: `matrix(${zoomObj().zoomx}, 0, 0, ${
                    zoomObj().zoomx
                }, 0, 0)`,
            }}>
            <div className={styles.title}>
                <img src={require('./assets/logo.png')}/>
            </div>
            <div className={styles.textContain}>
                {data?.map((o, i) => (
                    <div
                        className={current == o.navId ? styles.activeText : styles.text}
                        onClick={() => {
                            if (o.title == '联系我们') {
                                const list = data?.find((o) => o.title == '联系我们')?.resourceVOList[0]?.url
                                console.log(list, 'list')

                                setmodalUrl(list)
                                setTag(true)
                            } else {
                                setCurrent(o.navId);
                            }
                        }}
                    >
                        {o.title}
                    </div>
                ))}
            </div>
        </div>
    );
    ReactDOM.render(JSXdom, dom);
    const body = document.querySelector("body");
    useEffect(() => {
        if (resourceVOList) {
            if (body.append) {
                body.append(dom);
            } else {
                body.appendChild(dom);
            }
        }
    }, [resourceVOList, size])

    return (
        <div
            style={{
                width: '100vw',
                height: `100vh`,
                overflowX: 'hidden',
            }}
        >
            <div className={styles.container}
                 style={{
                     width: 1920,
                     transform: `matrix(${zoomObj().zoomx}, 0, 0, ${
                         zoomObj().zoomx
                     }, 0, 0)`,
                 }}
            >
                <Spin spinning={loading}>
                    <div className={styles.content}>
                        {resourceVOList?.map((o) => (
                            <img src={o?.url}/>
                        ))}
                    </div>
                </Spin>
                <div className={styles.footer}>
                    <img src={require('./assets/footer.png')}/>
                </div>
                {
                    modalUrl && <Modal
                        onCancel={() => setTag(false)}
                        width={710}
                        open={tag}
                        footer={null}
                        onOk={() => setTag(false)}
                    >
                        <img className={styles.lxwm} src={modalUrl}/>
                    </Modal>
                }
            </div>
            {
                !close && <div onClick={() => setclose(true)} className={styles.right}>
                    <img src={require('./assets/right.png')}/>
                </div>
            }
            {
                close && <div onClick={() => setclose(false)} className={styles.right_close}>
                    <img src={require('./assets/right_close.png')}/>
                </div>
            }
        </div>
    );
});
export default Layout;
